<template>
    <div>
        <v-header>
            <div slot="right" class="right">
                <select v-model="selected">
                    <option value="全部">全部</option>
                    <option value="已完成">已完成</option>
                </select>
            </div>
        </v-header>
        <ul>
            <li v-for="(item,index) in TXdata" :key="index">
                <div class="listLeft">
                    <h2>提现
                        <span>{{item.TX}}</span>
                    </h2>
                    <span>{{item.RQ}}</span>
                    <span>申请号：{{item.SQH}}</span>
                </div>
                <div class="listRight">
                    <span>状态：
                        <span v-show="item.ZT == '未处理'" style="color:#000;">{{item.ZT}}</span>
                        <span v-show="item.ZT == '处理中'" style="color:#000;">{{item.ZT}}</span>
                        <span v-show="item.ZT == '已完成'" style="color:#259E26;">{{item.ZT}}</span>
                    </span>
                    <span v-show="item.TZCS == 0 || item.ZT == '已完成'">通知次数：{{item.TZCS}} 次</span>
                    <span v-show="item.TZCS > 0 && item.ZT != '已完成'">通知次数：
                        <span style="color:red"> {{item.TZCS}} 次</span>
                    </span>
                    <input type="button" v-show="item.KF == 0" value="通知客服" @click="tzkf通知客服(index)">
                    <input type="button" v-show="item.KF == 1" value="正在审核" disabled style="background-color:#aaaaaa">
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
import vHeader from "../../Common/vHeader";
export default {
  data() {
    return {
      selected: "全部",
      TXdata: [
        {
          TX: "-234.00",
          RQ: "08-03  20:37",
          SQH: "CZ1710141704263923",
          ZT: "未处理",
          TZCS: 1,
          KF: 0
        },
        {
          TX: "-234.00",
          RQ: "08-03  20:37",
          SQH: "CZ1710141704263923",
          ZT: "未处理",
          TZCS: 0,
          KF: 0
        },
        {
          TX: "-234.00",
          RQ: "08-03  20:37",
          SQH: "CZ1710141704263923",
          ZT: "已完成",
          TZCS: 3,
          KF: 2
        },
        {
          TX: "-234.00",
          RQ: "08-03  20:37",
          SQH: "CZ1710141704263923",
          ZT: "处理中",
          TZCS: 3,
          KF: 1
        },
        {
          TX: "-234.00",
          RQ: "08-03  20:37",
          SQH: "CZ1710141704263923",
          ZT: "未处理",
          TZCS: 0,
          KF: 0
        },
        {
          TX: "-234.00",
          RQ: "08-03  20:37",
          SQH: "CZ1710141704263923",
          ZT: "未处理",
          TZCS: 1,
          KF: 0
        },
        {
          TX: "-234.00",
          RQ: "08-03  20:37",
          SQH: "CZ1710141704263923",
          ZT: "已完成",
          TZCS: 3,
          KF: 2
        },
        {
          TX: "-234.00",
          RQ: "08-03  20:37",
          SQH: "CZ1710141704263923",
          ZT: "未处理",
          TZCS: 1,
          KF: 0
        },
        {
          TX: "-234.00",
          RQ: "08-03  20:37",
          SQH: "CZ1710141704263923",
          ZT: "处理中",
          TZCS: 3,
          KF: 1
        },
        {
          TX: "-234.00",
          RQ: "08-03  20:37",
          SQH: "CZ1710141704263923",
          ZT: "未处理",
          TZCS: 0,
          KF: 0
        },
        {
          TX: "-234.00",
          RQ: "08-03  20:37",
          SQH: "CZ1710141704263923",
          ZT: "处理中",
          TZCS: 3,
          KF: 1
        },
        {
          TX: "-234.00",
          RQ: "08-03  20:37",
          SQH: "CZ1710141704263923",
          ZT: "已完成",
          TZCS: 3,
          KF: 2
        },
        {
          TX: "-234.00",
          RQ: "08-03  20:37",
          SQH: "CZ1710141704263923",
          ZT: "未处理",
          TZCS: 1,
          KF: 0
        },
        {
          TX: "-234.00",
          RQ: "08-03  20:37",
          SQH: "CZ1710141704263923",
          ZT: "已完成",
          TZCS: 3,
          KF: 2
        },
        {
          TX: "-234.00",
          RQ: "08-03  20:37",
          SQH: "CZ1710141704263923",
          ZT: "未处理",
          TZCS: 0,
          KF: 0
        },
        {
          TX: "-234.00",
          RQ: "08-03  20:37",
          SQH: "CZ1710141704263923",
          ZT: "未处理",
          TZCS: 1,
          KF: 0
        },
        {
          TX: "-234.00",
          RQ: "08-03  20:37",
          SQH: "CZ1710141704263923",
          ZT: "处理中",
          TZCS: 3,
          KF: 1
        },
        {
          TX: "-234.00",
          RQ: "08-03  20:37",
          SQH: "CZ1710141704263923",
          ZT: "未处理",
          TZCS: 0,
          KF: 0
        },
        {
          TX: "-234.00",
          RQ: "08-03  20:37",
          SQH: "CZ1710141704263923",
          ZT: "处理中",
          TZCS: 3,
          KF: 1
        },
        {
          TX: "-234.00",
          RQ: "08-03  20:37",
          SQH: "CZ1710141704263923",
          ZT: "已完成",
          TZCS: 3,
          KF: 2
        }
      ],
      temp: ""
    };
  },
  methods: {
    tzkf通知客服(index) {
      this.TXdata[index].KF = 1;
      this.TXdata[index].TZCS++;
      setTimeout(() => {
        this.$toast('重新拉去数据！')
      }, 1000);
    }
  },
  watch: {
    selected(newValue, oldValue) {
      if (oldValue == "全部") {
        this.temp = this.TXdata;
      }
      if (newValue == "全部") {
        this.TXdata = this.temp;
      } else if (newValue == "已完成") {
        this.TXdata = this.temp.filter(item => item.ZT == "已完成");
      }
    }
  },
  components: {
    vHeader
  }
};
</script>

<style scoped>
.right {
  display: flex;
  justify-content: flex-end;
  line-height: 3rem;
  height: 3rem;
}
.right > select {
  border: none;
  color: #ffffff;
  font-size: 1.1rem;
  background-color: transparent;
}
.right > select > option {
  color: #000;
}
ul {
  list-style: none;
  width: 90%;
  margin: 0 auto;
}
ul > li {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f0f0f2;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: #aaaaaa;
  font-size: 0.8rem;
}
ul .listLeft,
ul .listRight {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
ul .listLeft h2 {
  color: red;
}
ul .listLeft h2 > span {
  font-size: 0.8rem;
}
.listRight input {
  width: 4rem;
  border: none;
  background-color: #42a5f0;
  color: #ffffff;
  line-height: 1.5rem;
  border-radius: 0.2rem;
}
</style>